<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="title">资产账单</p>
<!--      <div class="d2">-->
<!--        <span class="s1">时间</span>-->
<!--        <div class="datePicker">-->
<!--          <date-picker-->
<!--            v-model="date1" type="date" :editable="dateAttr.editable" :clearable="dateAttr.clearable" placeholder="开始日期">-->
<!--          </date-picker>-->
<!--        </div>-->
<!--        <span class="s3"></span>-->
<!--        <div class="datePicker">-->
<!--          <date-picker-->
<!--            v-model="date2" type="date" :editable="dateAttr.editable" :clearable="dateAttr.clearable" placeholder="结束日期">-->
<!--          </date-picker>-->
<!--        </div>-->
<!--        <div class="d5">-->
<!--          <span :class="dateType === 0 ? 'active':''" @click="selDateType(0)">今天</span>-->
<!--          <span :class="dateType === 1 ? 'active':''" @click="selDateType(1)">最近一周</span>-->
<!--          <span :class="dateType === 2 ? 'active':''" @click="selDateType(2)">最近一个月</span>-->
<!--          <span :class="dateType === 3 ? 'active':''" @click="selDateType(3)">最近三个月</span>-->
<!--        </div>-->
<!--      </div>-->
      <div class="d3">
        <span class="s1">类型</span>
        <div class="billType">
          <span :class="billType === 0 ? 'active' :''" @click="choseBillType(0)">充值</span>
          <span :class="billType === 1 ? 'active' :''" @click="choseBillType(1)">提现</span>
          <span :class="billType === 2 ? 'active' :''" @click="choseBillType(2)">提币</span>
          <span :class="billType === 3 ? 'active' :''" @click="choseBillType(3)">充币</span>
          <span :class="billType === 4 ? 'active' :''" @click="choseBillType(4)">系统转币</span>
          <span :class="billType === 5 ? 'active' :''" @click="choseBillType(5)">系统转余额</span>
        </div>
      </div>
      <div class="d4" v-if="billType === 0">
        <span :class="nextType === 0 ? 'active':''" @click="changeNextType(0)">余额充值</span>
        <span :class="nextType === 1 ? 'active':''" @click="changeNextType(1)">OTC充值</span>
      </div>
      <div class="d4" v-if="billType === 1">
        <span :class="nextType === 0 ? 'active':''" @click="changeNextType(0)">余额提现</span>
        <span :class="nextType === 1 ? 'active':''" @click="changeNextType(1)">余额OTC提现</span>
      </div>
      <div class="d4" v-if="billType === 2">
        <span :class="nextType === 0 ? 'active':''" @click="changeNextType(0)">BHPay钱包</span>
        <span :class="nextType === 1 ? 'active':''" @click="changeNextType(1)">其他钱包</span>
      </div>
      <div class="d4" v-if="billType === 3">
        <span :class="nextType === 0 ? 'active':''" @click="changeNextType(0)">BHPay钱包</span>
        <span :class="nextType === 1 ? 'active':''" @click="changeNextType(1)">其他钱包</span>
      </div>
    </section>
    <section id="sec2">
      <!--table0  cny充值记录-->
      <table v-if="billType === 0 && nextType === 0">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/提币地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.create_time}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.currency_code.toUpperCase()}}</td>
          <td>{{item.payee_card.card_num || '----------'}}</td>
          <td>{{item.amount}}{{item.currency_code.toUpperCase()}}</td>
          <td>
            <span class="fail" v-if="item.status == -1">失败</span>
            <span class="inAudit" v-if="item.status == 0">审核中</span>
            <span class="success" v-if="item.status == 1">成功</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table1 otc充值记录-->
      <table v-if="billType === 0 && nextType === 1">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/提币地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.time_create}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.currency_name}}</td>
          <td>----------</td>
          <td>{{item.amount}}{{item.currency_name}}</td>
          <td>
            <span class="fail" v-if="item.status == -1">失败</span>
            <span class="inAudit" v-if="item.status == 0">审核中</span>
            <span class="success" v-if="item.status == 1">成功</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table2 cny提现记录-->
      <table v-if="billType === 1 && nextType === 0">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>提现账户</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.add_time}}</td>
          <td>{{names[billType]}}</td>
          <td><span v-if="item.currency_code">{{item.currency_code.toUpperCase()}}</span></td>
          <td>
<!--            {{item.card_num}}-->
            {{item.card_num.substring(0,4) + '********' + item.card_num.substring(item.card_num.length-4)}}
          </td>
          <td>{{item.amount}}<span v-if="item.currency_code">{{item.currency_code.toUpperCase()}}</span></td>
          <td>
            <span class="fail" v-if="item.status == 2">已取消</span>
            <span class="inAudit" v-if="item.status == 0">审核中</span>
            <span class="success" v-if="item.status == 1">已完成</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table3 otc提现记录-->
      <table v-if="billType === 1 && nextType === 1">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/提币地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.add_time}}</td>
          <td>{{names[billType]}}</td>
          <td>OTC余额</td>
          <td>{{item.bankinfo.bank_card_no.slice(0,4)}}******{{item.bankinfo.bank_card_no.slice(-4)}}</td>
          <td> {{item.amount}}OTC余额</td>
          <td>
            <!--            <span class="fail" v-if="item.status == 2">已取消</span>-->
            <!--            <span class="inAudit" v-if="item.status == 0">审核中</span>-->
            <!--            <span class="success" v-if="item.status == 1">已完成</span>-->
            <span v-if="item.status == -2 || item.status == -1" class="fail">{{item.status_format}}</span>
            <span v-if="item.status == 1" class="inAudit">{{item.status_format}}</span>
            <span v-if="item.status == 2" class="success">{{item.status_format}}</span>
            <span v-if="item.status != -2&&item.status != -1&&item.status != 1&&item.status != 2" class="inAudit">{{item.status_format}}</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table4 bhPay提币记录-->
      <table v-if="billType === 2 && nextType === 0">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/提币地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.create_time}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.currency_name}}</td>
          <td>BHPay账户(尾号{{item.bhpay_card_no.slice(-4)}})</td>
          <td> {{item.num}}</td>
          <td>
            <span v-if="item.status == 1" class="inAudit">审核中</span>
            <span v-if="item.status == 2" class="success">已通过</span>
            <span v-if="item.status == 3" class="fail">已撤销</span>
            <span v-if="item.status == 4" class="fail">已驳回</span>
            <span v-if="item.status == 5" class="inAudit">已到账</span>
            <span v-if="item.status == 6" class="fail">失败</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table5 其他钱包提币记录-->
      <table v-if="billType === 2 && nextType === 1">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/提币地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.add_time}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.coin_type}}</td>
          <td>{{item.wallet_address}}</td>
          <td> {{item.coin_num}}</td>
          <td>
            <span v-if="item.state == 0" class="inAudit">审核中</span>
            <span v-if="item.state == 1" class="success">已完成</span>
            <span v-if="item.state == 2" class="fail">已取消</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table6 bhPay充币记录-->
      <table v-if="billType === 3 && nextType === 0">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.create_at}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.currency}}</td>
          <td>BHPay账户(尾号{{item.card_num}})</td>
          <td> {{item.amount}}</td>
          <td>
            <span v-if="item.status == 0" class="inAudit">审核中</span>
            <span v-if="item.status == 1" class="success">成功</span>
            <span v-if="item.status == 2" class="fail">已取消</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table7 其他钱包充币记录-->
      <table v-if="billType === 3 && nextType === 1">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/提币地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.add_time}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.currency_name}}</td>
          <td>{{item.to_address.slice(0,8)+"……"+item.to_address.slice(-8)}}</td>
          <td>{{item.num}}</td>
          <td>
            <span v-if="item.status == 0" class="inAudit">审核中</span>
            <span v-if="item.status == 1" class="success">充币成功</span>
            <span v-if="item.status == -1" class="fail">充币失败</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table8 系统转币-->
      <table v-if="billType === 4">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.add_time}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.currency_name}}</td>
          <td>-------------</td>
          <td>{{item.type==1?"+":"-"}}{{item.num}}{{item.currency_name}}</td>
          <td>
            <span class="success">已成功</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--table9 系统转余额-->
      <table v-if="billType === 5">
        <thead>
        <tr>
          <td>时间</td>
          <td>类型</td>
          <td>币种</td>
          <td>帐户/地址</td>
          <td>数量</td>
          <td>状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item ,index) in data">
          <td>{{item.add_time}}</td>
          <td>{{names[billType]}}</td>
          <td>{{item.currency_code}}</td>
          <td>-------------</td>
          <td>{{item.type==1 ? "+":"-"}}{{item.add_money}}{{item.currency_code}}</td>
          <td>
            <span class="success">已成功</span>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="noData" v-if="data.length === 0">
        <img src="../common/imgs/billNull.png" alt="空">
        <p>暂无数据</p>
      </div>
      <div class="pagination" v-if="totalNum > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="prev, pager, next, jumper"
          :page-count="totalNum">
        </el-pagination>
      </div>
    </section>
  </div>
</template>
<script>
  import { cashWithDrawList , cnyRechargeList , otcRechargeList , outToBhpayCoinsList ,
    otherWalletOutList , inToBhpayCoinsList , inToOtherWalletCoinsList,
    systemCoinsList , systemMoneyList
  } from '../http/api';
  export default {
    name : 'bill',
    data(){
      return{
        // date1 : null,
        // date2 : null,
        // dateAttr:{
        //   editable : false,
        //   clearable : false
        // },
        dateType : 0, //时间段类型 index
        billType : 0, //数据类型
        currentPage: 1,
        totalNum : 1,//总页数
        pageSize : 20,
        names :['充值' , '提现' ,'提币' ,'充币' ,'系统转币' , '系统转余额'],
        nextType : 0 , //二级栏目：选择类别
        data :[],
      }
    },
    components:{
      //DatePicker :  require('element-ui').DatePicker, /*DatePicker*/
      ElPagination : require('element-ui').Pagination, /*ElPagination*/
    },
    watch:{

    },
    mounted() {
      this.loadPage();
    },
    methods:{
      getCashWithDrawList(){
        let param = {
          pageSize : this.pageSize,
          page: this.currentPage,
          currency_name: this.nextType === 0 ? 'CNY' : 'BCNY',
        };
        let thiz = this;
        cashWithDrawList(param).then(res => {
          if(res.code == 200){
            let data = res.data.lists || [];
            if(thiz.billType === 1 && thiz.nextType === 0){
              //提现
              thiz.for(data ,(item , index) => {
                let card_num = item.bankinfo.bank_card_no;
                var reg = /^(\d{4})\d{8}(\d{4})$/;
                item.card_num = card_num.replace(reg, '$1********$2');
              });
            }
            this.totalNum = res.data.total_page;
            this.data = data;
          }
        });
      },
      getCnyRechargeList(){
        //cny充值记录
        let param = {
          pageSize : this.pageSize,
          page: this.currentPage
        };
        cnyRechargeList(param).then(res => {
          if(res.code ==200){
            let list = res.data.lists || [];
            this.data = list;
            this.totalNum = res.data.total_page;
          }
        });
      },
      getOtcRechargeList(){
        //获取otc充值记录
        let param = {
          pageSize : this.pageSize,
          page : this.currentPage
        };
        otcRechargeList(param).then(res => {
          if(res.code ==200){
            let list = res.data.lists || [];
            this.data = list;
            this.totalNum = res.data.totalPage;
          }
        });
      },
      getOutBhpayCoinsList(){
        //bhpay提币记录
        let param = {
          pageSize : this.pageSize,
          page: this.currentPage
        };
        outToBhpayCoinsList(param).then(res => {
          if(res.code ==200){
            let list = res.data.lists || [];
            let thiz = this;
            this.for(list , (item , index) => {
              if (item.currency_name == "BHP" || item.currency_name == "USDT") {
                item.num = thiz.numSlice(item.num, 4);
              } else {
                item.num = thiz.numSlice(item.num, 8);
              }
            });
            this.data = list;
            this.totalNum = res.data.total_page;
          }
        });
      },
      getOtherWalletOutList(){
        //获取其他钱包提币记录
        let param = {
          pageSize : this.pageSize,
          page : this.currentPage
        };
        let thiz = this;
        otherWalletOutList(param).then(res => {
          if(res.code ==200){
            let list = res.data.lists.withdrawcoin;
            this.for(list , (item , index) => {
              if (item.coin_type == "BHP" || item.coin_type == "USDT" || item.coin_type == "BHPC") {
                item.coin_num = thiz.numSlice(item.coin_num, 4);
              } else {
                item.coin_num = thiz.numSlice(item.coin_num, 8);
              }
            });
            this.data = list;
            this.totalNum = res.data.lists.total_page;
          }
        });
      },
      getInToBhpayCoinsList(){
        //获取bhpay充币记录
        let param = {
          pageSize : this.pageSize,
          page : this.currentPage
        };
        inToBhpayCoinsList(param).then(res => {
          if(res.code ==200){
            let list = res.data.lists || [];
            this.data = list;
            this.totalNum = res.data.total_page;
          }
        });
      },
      getInToOtherWalletCoinsList(){
        //获取其他钱包充币记录
        let param = {
          pageSize : this.pageSize,
          page : this.currentPage
        };
        let thiz = this;
        inToOtherWalletCoinsList(param).then(res => {
          if(res.code ==200){
            let list = res.data.list || [];
            thiz.for(list ,(item , index)=>{
                if (item.currency_name == "BHP" || item.currency_name == "USDT" || item.currency_name == "BHPC") {
                  item.num = thiz.numSlice(item.num, 4);
                } else {
                  item.num = thiz.numSlice(item.num, 8);
                }
            });
            this.data = list;
            this.totalNum = res.data.total_page;
          }
        });
      },
      getSystemCoinsList(){
        //获取系统转币
        let param = {
          pageSize : this.pageSize,
          page: this.currentPage
        };
        systemCoinsList(param).then(res => {
          if(res.code ==200){
            let list = res.data.list || [];
            let thiz = this;
            this.for(list , (item , index) => {
              if (item.currency_name == "BHP") {
                item.num = thiz.numSlice(item.num, 4);
              } else if (item.currency_name == "BCNY") {
                item.num = thiz.numSlice(item.num, 2);
              } else {
                item.num = thiz.numSlice(item.num, 8);
                if (item.currency_name == "BTC_TC" || item.currency_name == "IPFS_TC") {
                  item.currency_name = "CNY";
                }
              }
            });
            this.data = list;
            this.totalNum = res.data.total_page;
          }
        });
      },
      getSystemMoneyList(){
        //获取系统转余额记录
        let param = {
          pageSize : this.pageSize,
          page : this.currentPage
        };
        systemMoneyList(param).then(res => {
          if(res.code ==200){
            let list = res.data.list || [];
            this.data = list;
            this.totalNum = res.data.total_page;
          }
        });
      },
      choseBillType(index){
        //选择账单类型
        if(this.billType != index){
          this.nextType = 0;
          this.billType = index;
          this.data = [];
          this.loadPage();
        }
      },
      changeNextType(type){
        //二级目录类型
        if(this.nextType != type){
          this.nextType = type;
          this.data = [];
          this.loadPage();
        }
      },
      loadPage(){
        let billType = this.billType;
        let nextType = this.nextType;
        switch (billType) {
          case 0 :
            if(nextType === 0){
              this.getCnyRechargeList();
            } else{
              this.getOtcRechargeList();
            }
            break;
          case 1:
            this.getCashWithDrawList();
            break;
          case 2:
            if(nextType === 0){
              this.getOutBhpayCoinsList();
            }else{
              this.getOtherWalletOutList();
            }
            break;
          case 3:
            if(nextType === 0){
              this.getInToBhpayCoinsList();
            }else{
              this.getInToOtherWalletCoinsList();
            }
            break;
          case 4:
            this.getSystemCoinsList();
            break;
          case 5:
            this.getSystemMoneyList();
            break;
        }
      },
      selDateType(index){
        if(this.dateType != index){
          this.dateType = index;
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadPage();
      }
    },
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  /deep/ .el-select .el-input{
    border-color: #EEEEEE;font-size: 16px;
  }
  #sec1 {
    > .title {
      font-size: 24px;
      color: #262626;
    }
    >.d2{
      padding-top: 40px;overflow: hidden;
      >.s1{
        line-height: 40px;color: #262626;font-size: 14px;padding-right: 18px;float: left;
      }
      >.s3{
        line-height: 40px;display: inline-block;width: 48px;position: relative;float: left;height: 40px;
        &:before{
          content: '';display: inline-block;width: 12px;height: 2px;background: #262626;
          position: absolute;z-index: 1;left: 50%;margin-left: -6px;margin-top: -1px;top: 50%;
        }
      }
      >.datePicker{
        float: left;width: 130px;overflow: hidden;
        /deep/ .el-input__inner{
          width: 100%;font-size: 14px;padding-right: 15px;
          .placeholder(14px)
        }
        >div{
          width: 100%;
        }
      }
      >.d5{
        float: left;padding-left: 0px;
        >span{
          padding: 0 15px;color: #999999;font-size: 14px;line-height: 40px;height: 40px;display: inline-block;
          &:hover{
            cursor: pointer;.colorYellow;
          }
          &.active{
            .colorYellow;
          }
        }
      }
    }
    >.d3{
      padding-top: 50px;padding-bottom: 0px;overflow: hidden;
      >.s1{
        color: #262626;font-size: 14px;float: left;padding-right: 18px;
      }
      >.billType{
        float: left;font-size: 0;padding-left: 3px;
        >span{
          font-size: 14px;color: #999999;padding: 0 15px;
          &:hover{
            cursor: pointer;.colorYellow;
          }
          &.active{
            .colorYellow;
          }
        }
      }
    }
    >.d4{
      padding-left: 64px;font-size: 0;padding-top: 15px;
      >span{
        display: inline-block;padding: 9px 13px;border-radius:100px;background: #F8F8F8;color: #999;font-size: 14px;margin-left: 25px;
        &:first-child{
          margin-left: 0;
        }
        &.active{
          .bgYellow;color: #fff;
        }
        &:hover{
          cursor: pointer;.bgYellow;color: #fff;
        }
      }
    }
  }
  #sec2{
    margin-top: 12px;padding-top: 31px;min-height: 500px;
    >table{
      width: 100%;
      >thead{
        color: #999999;font-size: 14px;
        tr>td{
          padding-bottom: 18px;
          &:last-child{
            text-align: right;
          }
        }
      }
      >tbody{
        font-size: 12px;color: #262626;
        tr>td{
          border-bottom: 1px solid#F3F3F5;padding: 14px 0;
          &:last-child{
            text-align: right;
          }
        }
        .fail{
          color: #FF5F5F;
        }
        .inAudit{
          .colorYellow;
        }
        .hasPay,.success{
          color: #19AD5B;
        }
      }
    }
    >.noData{
      text-align: center;font-size: 0;padding: 50px 0;
      >img{
        width: 100px;
      }
      >p{
        color: #999;font-size: 14px;
      }
    }
    .pagination{
      text-align: right;padding: 36px 0;
      /deep/ input{
        width: auto;
        &.el-input__inner{
          width: 100%;
        }
      }
    }
  }
</style>
